<template>
	<view>
		<view border-bottom class="line u-p-l-40 u-p-r-40">
			<u-form :model="form" ref="uForm" class="form">
				<u-form-item label="昵称" prop="name" required>
					<u-input v-model="form.name" placeholder="请输入用户名" class="form-item"/>
				</u-form-item>
				
			</u-form>
			<u-button @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
						name: '',
						
					},
				rules: {
						name: [
							{ 
								required: true, 
								message: '请输入昵称', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
					}		
			}
		},
		methods: {
			/**
			 * 执行注册
			 */
			submit(){
				// 1.表单验证
				this.$refs.uForm.validate(async valid => {
						if (valid) {
							// 更新用户信息
							await this.$u.api.userInfoUpdate(this.form)
							// 刷新用户信息,更新vuex_user
							this.$u.utils.updateUser()
							this.$u.toast('更新昵称成功')
						}
					});
						
			
				
			}
			
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			// console.log(this.vuex_user);
			this.form.name = this.vuex_user.name
			
		}
	}
</script>


<style lang="scss" scoped>
	.line {
		width: 100%;
		height: 20rpx;
		background-color: #DDDDDD;
	}
 
	.form {
		width: 95%;
		margin: auto;
 
		.form-item {
			margin-left: 50rpx;
		}
	}
</style>
